interface go {
    name: string;
    url: string;
    waistline?: number; // 可有可无 ||
}
interface Global {
    document:any;
  }
const domArr: go[] = [{
    name: "首页",
    url: "./第一页.html"
},
{
    name: "第二页",
    url: "./第二页.html"
},
{
    name: "第三页",
    url: "./第三页.html"
},
{
    name: "第四页",
    url: "./第四页.html"
},
{
    name: "第六页",
    url: "./第六页.html"
}]


function $(dom: string): any {
    return document.querySelector(dom);
}

class Stefocuse {
    public Boxheight: number;
    public box: any;
    public name: string;
    public pageY: number;
    public pageX: number;
    public move: boolean;
    public constructor( box: string, name: string) {
        this.Boxheight = Number(window.innerHeight / 2);
        this.box = $(box);
        this.name = name;
        this.pageY = 0;
        this.pageX = 0;
        this.move = false;
        this.Down();
        this.scroll();
    }
    Down() {
        const _this = this;
        let downY: number = 0;
        let UPY: number = 0;
        this.myAddEvent(this.box, 'mousedown', (event: any) => {
            downY = 0;
            UPY =0;
            downY = event.y;
            this.box.onmousemove = function (event: any) {
                // ({ x: _this.pageX, y: _this.pageY } = event);
                _this.move = true
            }
        })
        this.myAddEvent(this.box, 'mouseup', (event: any) => {
            if (_this.move) {
                UPY = event.y;
                if (UPY - downY > 200 || UPY - downY < 200) {
                    const bool = downY < UPY ? true : false;
                    this.tebHref(bool, this.name);
                    this.box.onmousemove = null;
                }
            }
        })
    }
    myAddEvent(ele: any, type: string, fun: Function) {
        if (ele.addEventListener) {
            ele.addEventListener(type, fun);
        } else {
            ele.attachEvent('on' + type, fun);
        }
    }
    tebHref(bool: boolean, text: string) {
        const index = this.getArrayIndex(bool, text);
        if (text != domArr[index].name) {
            this.box.onmousemove = null;
            this.pageX = 0;
            this.pageY = 0;
            this.move = false;
            window.location.href = domArr[index].url
        }
    }
    getArrayIndex(bool: boolean, text: string): any {
        debugger
        let i = domArr.length;
        let index = 0;
        while (i--) {
            if (domArr[i].name === text) {
                index = i;
            }
        }
        if (bool) {
            index = index >= domArr.length - 1 ? domArr.length - 1 : index + 1
        } else {
            index = index <= 0 ? 0 : index - 1
        }
        return index
    }
    /* 鼠标滚动事件 */
    scroll(){
        window.onmousewheel = null;
        const _this = this;
        let bool = false;
        var scrollFunc = function (e:any) {
            e = e || window.event;
            if (e.wheelDelta) {  //判断浏览器IE，谷歌滑轮事件               
                if (e.wheelDelta > 0) { //当滑轮向上滚动时  
                    bool = false
                }
                if (e.wheelDelta < 0) { //当滑轮向下滚动时  
                    bool = true;
                }
            } 
            _this.tebHref(bool, _this.name);
        }
        //给页面绑定滑轮滚动事件  
        if (document.addEventListener) {//firefox  
            document.addEventListener('DOMMouseScroll', scrollFunc, false);
        }
        //滚动滑轮触发scrollFunc方法  //ie 谷歌  
       setTimeout(()=>{
        window.onmousewheel = scrollFunc;
       },300)
    }
}
